<template>
	<!-- 现场通讯录 -->
	<view>
		<!-- 未加入 -->
		<view class="not_state text-center" v-if="!isJoin">
			<image src="@/static/img2/home/txl_bg.jpg" mode="" class="text-center m-auto not_img"></image>
			<view class="not_cont">
				<image src="@/static/img2/home/join_card.png" mode="aspectFit"></image>
				<view class="not_text text-white text-left">
					<view class="font-lg">加入现场通讯录</view>
					<view class="font-md my-1">结识更多朋友</view>
					<view class="font-sm">参加步数大比拼，争取更高排名</view>
				</view>
				<button plain="true" class="add_btn c_main mt-5 font bg-white font-weight-bold" @click="joinCircle">马上加入</button>
				<!-- <text class="not_text font-md c_main py-2 px-5 rounded_15 bg-white">加入现场通讯录解释更多朋友</text>
				<button type="primary" plain="true" class="add_btn mt-5 font" @click="joinCircle">马上加入</button> -->
			</view>
		</view>
		<!-- 已加入 -->
		<view v-else>
			<u-sticky>
				<view class="fixTop bg-white p-2" style="margin: 14rpx 0;">
					<view class="big_tit font-weight-bold h4">
						<view class="flex justify-between">
							<text>现场通讯录</text>
							<view class="flex" style="transform: translateY(-10rpx);">
								<button class="r_btn bg-warning font_24 text-white text-center" @click="refresh">刷新</button>
								<button class="r_btn bg_main font_24 text-white text-center" @click="meCard">{{ !isMe ? '我的名片' : '返回顶部' }}</button>
								<!-- <button class="r_btn out_circle font_24 text-white text-center"
									@click="outcircle">退出圈子</button> -->
							</view>
						</view>
					</view>
					<view class="pt-2 mt-1"><search-view @search="searchChange" @clear="searchChange('')"></search-view></view>
				</view>
			</u-sticky>
			<view class="card_list bg-white" :style="{ height: scrollHeight + 'rpx' }">
				<view v-if="circleData.length <= 0" class="p-2 mt-3" style="margin: 0 auto;">
					<u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" text="暂无名片信息"></u-empty>
				</view>
				 <!-- style="padding-bottom: 100rpx;" -->
				<view v-else class="bg-white">
					<!-- <view class="font_24 c_6 text-center">快来步数大比拼，争取更高排名</view> -->
					<scroll-view
						:scroll-y="true"
						:style="{ height: scrollHeight + 'rpx' }"
						style="background-color: #fff;"
						:refresher-threshold="10"
						:lower-threshold="100"
						:scroll-with-animation="true"
						@refresherrefresh="refresherrefreshFun"
						@refresherpulling="refresherpullingFun"
						:refresher-triggered="isRefresher"
						@scrolltolower="scrolltolowerFun"
						refresher-enabled="true"
						refresher-default-style="none"
						:scroll-into-view="meCardInto"
						:scroll-top="scrollTop"
					>
						<!-- <view class="text-center font_22 c_9" v-if="isMe && page > 1">——下拉加载更多——</view> -->
						<!-- 交换名片列表 -->
						<card-list
							v-if="circleData.length >= 1"
							ref="cardlist"
							:card-list="circleData"
							:exhibitionId="exhibitionId"
							:btnShow="true"
							:card-disabled="true"
							:isme="isMe"
							:content="content"
							@modelShow="modelShow"
							@scrollTop="scrollTopChange"
						></card-list>
						<u-loadmore :status="status" color="#E5E5E5" lineColor="#E5E5E5" dashed line />
					</scroll-view>
				</view>
				<u-modal
					:show="exChangeShow"
					title="验证信息"
					confirmText="确认"
					cancelText="取消"
					:showCancelButton="true"
					confirmColor="#CF1526"
					cancelColor="#D3D3D3"
					@confirm="exChange"
					@cancel="exChangeShow = false"
				>
					<view class="slot-content bg-white"><textarea v-model="content" placeholder="请输入验证消息" class="p-2" style="height: 194rpx;"></textarea></view>
				</u-modal>
			</view>
		</view>
		<!-- 新用户指引 -->
		<u-overlay :show="userGuide" opacity="0.7">
			<view class="overlay position-relative">
				<view class="text-center top_btn">
					<view class="text-white font-small">点击下方按钮关闭引导</view>
					<button class="know_btn bg-white c_main font mt-1" @click="userGuide = false">我知道了</button>
				</view>
				<view class="tip1 position-absolute">
					<image class="model_img model1" src="@/static/img2/home/guide/model1.png" mode="aspectFit"></image>
					<image class="find_me" src="@/static/img2/home/guide/findme.png" mode="aspectFit"></image>
				</view>
				<view class="tip2 position-absolute">
					<image class="model_img model2" src="@/static/img2/home/guide/model2.png" mode="aspectFit"></image>
					<image class="card" src="@/static/img2/home/guide/card.png" mode="aspectFit"></image>
					<image class="model_img model3" src="@/static/img2/home/guide/model3.png" mode="aspectFit"></image>
				</view>
				<view class="tip3 position-absolute">
					<image class="model_img model4" src="@/static/img2/home/guide/model4.png" mode=""></image>
					<image class="msg_tab" src="@/static/img2/home/guide/msg_icon.png" mode=""></image>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
import util from '@/common/js/util.js';
import { circleList, circleIsjoin, outCircle, addCircle } from '@/api/home/company.js';
import { circleAnchor, messagePrompt } from '@/api/my/card.js';
import cardList from '@/components/card_list.vue';
import searchView from '@/components/search/search.vue';
export default {
	components: {
		searchView,
		cardList
	},
	props: ['exhibitionId', 'topcontHeight', 'shareId'],
	data() {
		return {
			search: '', //搜索
			// isShow: true,
			dataList: [],
			circleData: [],
			status: 'loadmore',
			page: 1, //页数
			pagesize: 20, //每页显示条数
			suo: true,
			searchVal: '',
			isJoin: true,
			isMe: false, //查看我的名片
			meCardInto: '',
			mePage: 1, //我的名片的当前页数
			isRefresher: false, //下拉刷新状态
			scrollHeight: 350, //获取名片列表的固定高度
			scrollTop: 0, //滚动到我的名片的高度
			middleHeight: 0, // 中间部分的高度
			exChangeShow: false,
			content: '我想成为你的圈内好友，希望和你交个朋友！',
			isLocation: false,
			userGuide: false //用户指引
		};
	},
	watch: {
		topcontHeight(newV, oldV) {
			// console.log('newV', newV);
		}
	},
	created() {
		// 新用户指引
		messagePrompt({ share_id: this.shareId }).then(res => {
			if (res.code == 0) {
				this.userGuide = res.is_prompt == 1 ? true : false;
			} else {
				this.userGuide = false;
			}
		});
	},
	mounted() {
		this.getscrollH();
		this.isJoinChange();
	},
	methods: {
		getscrollH() {
			let that = this;
			if (uni.getStorageSync('isJoin') == this.exhibitionId) {
				that.scrollHeight = uni.getStorageSync('scrollHeight');
				return;
			}
			that.$nextTick(() => {
				// 获取滚动高度
				uni.getSystemInfo({
					success: res => {
						let windowHeight = res.windowHeight - res.statusBarHeight; //屏幕高度-状态栏高度
						const query = uni.createSelectorQuery().in(that);
						query
							.select('.fixTop')
							.boundingClientRect(data => {
								if (data) {
									that.middleHeight = data.height; //中间圈子搜索框部分高度
								} else {
									that.middleHeight = 90;
								}
								let height = windowHeight - that.topcontHeight - that.middleHeight + 10; //获取名片列表高度
								that.scrollHeight = height / (uni.upx2px(height) / height);
								uni.setStorageSync('scrollHeight', that.scrollHeight);
							})
							.exec();
					}
				});
			});
		},
		isJoinChange() {
			// console.log('111');
			if (uni.getStorageSync('isJoin') == this.exhibitionId) {
				this.isJoin = true;
				// this.getscrollH();
				// this.getList();
				this.getStep(); //步数更新
				return;
			}
			// console.log('222');
			// 是否已加入圈子
			circleIsjoin({
				company_id: uni.getStorageSync('userInfo').userId,
				zhanhui_id: this.exhibitionId
			})
				.then(res => {
					if (res.code == 0) {
						if (res.status == 1) {
							this.isJoin = true;
							// this.getscrollH();
							this.getStep(); //步数更新,更新名片列表
							uni.setStorageSync('isJoin', this.exhibitionId);
						} else {
							// 我的名片保存成功后自动跳转到现场通讯录并加入圈子
							if (uni.getStorageSync('mycodeSuccess')) {
								this.exhibitionId = uni.getStorageSync('mycodeSuccess');
								this.joinCircle();
								return;
							}
							this.isJoin = false;
						}
					} else {
						this.isJoin = false;
						// uni.$u.toast(res.msg);
					}
					
				})
				.catch(err => {
					console.log(err);
					this.isJoin = false;
				});
		},
		// 加入圈子
		joinCircle() {
			uni.showModal({
				title: '加入现场通讯录',
				content: '加入现场通讯录后其他用户将看到您的名片，助您结识更多圈内好友!',
				cancelColor: '#D3D3D3',
				confirmColor: '#CF1526',
				success: res => {
					if (res.confirm) {
						if (uni.getStorageSync('userInfo').hasLogin) {
							let msg = {
								company_id: uni.getStorageSync('userInfo').userId,
								zhanhui_id: this.exhibitionId
							};
							addCircle(msg).then(res => {
								if (res.code == 1) {
									this.isJoin = true;
									// this.getscrollH();
									this.getStep(); //步数更新,更新名片列表
									uni.$u.toast('加入现场通讯录成功');
									uni.setStorageSync('isJoin', this.exhibitionId);
								} else {
									// uni.$u.toast('加入圈子失败');
									uni.showModal({
										title: '提示',
										content: '请先完善您的名片信息再加入现场通讯录！',
										cancelColor: '#D3D3D3',
										confirmColor: '#CF1526',
										success: res => {
											if (res.confirm) {
												uni.navigateTo({
													url: '/subPages/my/list/card/business_card'
												});
											} else {
												// console.log('点击了取消');
												return;
											}
										}
									});
								}
							});
						} else {
							this.toLogin(); // 未登录
						}
					} else {
						this.isJoin = false;
						uni.setStorageSync('mycodeSuccess', false);
					}
					
				}
			});
		},
		// 名片列表
		getList(state) {
			let msg = {
				kw: decodeURIComponent(this.searchVal) || '',
				page: this.page,
				pagesize: this.pagesize,
				uid: uni.getStorageSync('userInfo').userId || '', //用户id
				zhanhui_id: this.exhibitionId
			};
			circleList(msg).then(res => {
				// console.log("名片列表", res);
				if (res.code == 0) {
					this.dataList = res.data.data;
					// 跳转到我的名片位置后,下拉刷新后应显示上一页的数据
					if (this.isRefresher) {
						this.circleData.unshift(...res.data.data);
						this.isRefresher = false;
						this.getScroll();
						return;
					}
					// 从名片详情返回名片列表会更新一下列表数据状态，防止列表一直被push
					if (!state) {
						this.circleData.push(...res.data.data);
					}
					// console.log('this.circleData==>', this.circleData.length);
					if (res.data.data.length == 0) {
						this.status = 'nomore';
						this.suo = false;
					} else if (res.data.data.length < this.pagesize) {
						this.status = 'nomore';
						this.suo = false;
					} else if (this.page >= res.data.last_page) {
						this.status = 'nomore';
						this.suo = false;
					} else {
						this.status = 'loadmore';
						this.suo = true;
					}

					this.getScroll();
				} else {
					console.log('获取展会圈子失败');
				}
			});
		},
		getScroll() {
			if (this.isLocation) {
				this.$nextTick(() => {
					if (this.dataList.length >= 1 && this.isMe) {
						this.$refs.cardlist.getElementScollTop();
					}
				});
			}
		},
		// 搜索
		searchChange(val) {
			this.searchVal = val;
			this.circleData = [];
			this.page = 1;
			this.getList();
		},
		// 展开按钮
		btnChange(val, idx) {
			this.$set(this.circleData[idx], 'isShow', !val.isShow);
			this.circleData = JSON.parse(JSON.stringify(this.circleData));
		},
		// 退出圈子
		outcircle() {
			uni.showModal({
				content: '退出圈子后，您将无法看到圈内名片',
				cancelColor: '#D3D3D3',
				confirmColor: '#CF1526',
				success: res => {
					if (res.confirm) {
						let msg = {
							company_id: uni.getStorageSync('userInfo').userId,
							zhanhui_id: this.exhibitionId
						};
						outCircle(msg).then(res => {
							// console.log('退出圈子', res);
							if (res.code == 1) {
								uni.$u.toast('退出圈子成功');
								this.isJoin = false;
							} else {
								uni.$u.toast(res.info);
								this.isJoin = true;
								// this.getscrollH();
							}
						});
					} else {
						// console.log('点击了取消');
						return;
					}
				}
			});
		},
		// 刷新名片列表
		refresh() {
			this.circleData = [];
			this.page = 1;
			this.getStep();
		},
		// 定位到我的名片
		meCard() {
			// 全部名片
			if (this.isMe) {
				this.page = 1;
				this.scrollTop = 0;
				this.circleData = [];
				setTimeout(() => {
					this.getList();
					this.isMe = false;
				}, 500);
				return;
			}
			// 我的名片
			circleAnchor({
				// uid: '16838',
				uid: uni.getStorageSync('userInfo').userId,
				zhanhui_id: this.exhibitionId
			})
				.then(async res => {
					this.mePage = res.page; //保存我的名片的页数，下拉刷下的时候可加载我的名片上一页的数据，防止上拉加载把页数加到很大无法加载我的名片上一页的数据
					console.log('this.mePage', this.mePage);
					// console.log('this.mePage==>', this.mePage);
					this.page = res.page;
					this.circleData = [];
					await this.getList();
					this.isMe = true;
					this.isLocation = true;
					this.$nextTick(() => {
						this.meCardInto = 'meCard' + uni.getStorageSync('userInfo').userId;
					});
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 滚动到我的名片位置
		scrollTopChange(val) {
			this.scrollTop = val - 500;
			this.isLocation = true;
		},
		// 下拉刷新被触发
		refresherrefreshFun() {
			// console.log('下拉刷新');
			// if (!this.isMe) return;
			console.log('mePage', this.mePage, 'page', this.page);
			if (this.mePage <= 1 || this.page <= 1) {
				uni.$u.toast('已经到顶了哦！');
				this.isRefresher = false;
				return;
			}
			this.isRefresher = true;
			if (this.isMe) {
				// this.page = --this.page; //mePage;
				this.isLocation = true;
			}
			this.page = --this.page;

			setTimeout(() => {
				this.getList();
			}, 500);
		},
		// 下拉刷新触发
		refresherpullingFun() {
			// this.isRefresher = true;
		},
		//上拉加载，页面滑动到底部加载分页数据
		scrolltolowerFun() {
			setTimeout(() => {
				//定义个小锁，当没有数据时锁住suo
				if (this.suo) {
					// console.log('上拉加载');
					this.status = 'loading';
					// if (this.isMe) {
					// 	// 在我的名片页面下拉刷新时，用我的名片页面减减
					// 	this.page = ++this.page;//.mePage;
					// } else {
					this.page = ++this.page;
					// }
					// this.page = ++this.page;
					this.getList();
					this.isLocation = false;
				}
			}, 500);
		},
		// 交换名片弹窗
		modelShow(val) {
			this.exChangeShow = val;
		},
		exChange() {
			this.$refs.cardlist.exChange();
		},
		/**微信运动步数更新**/
		getStep() {
			// util.getStep().then(res => {
			this.getList();
			// });
		}
	}
};
</script>

<style lang="scss" scoped>
.not_state {
	margin-top: 20rpx;
	height: 65vh;
	position: relative;

	.not_img {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.not_cont {
		width: 100%;
		position: absolute;
		top: 200rpx;
		left: 50%;
		margin-left: -300rpx;
		image {
			height: 300rpx;
			width: 600rpx;
		}
		.not_text {
			// font-weight: bold;
			// border: 1px solid $color14;
			position: absolute;
			top: 20rpx;
			right: 192rpx;
		}
		.add_btn {
			background-color: #fff;
			color: $color14;
			width: 480rpx;
			border: 0;
			position: absolute;
			bottom: 30rpx;
			left: 50%;
			margin-left: -312rpx;
		}
	}
	.popup_text {
		padding: 50rpx;
	}

	.join_popup_btn {
		.btn {
			width: calc((100% / 2) - 30rpx);
			border-radius: 15rpx;
		}
	}
}

.big_tit {
	border-left: 6rpx solid $color14;
	padding-left: 20rpx;
	height: 32rpx;
	line-height: 30rpx;

	.r_btn {
		border-radius: 10rpx;
		margin-left: 10rpx;
		padding: 0 10rpx;
		width: 120rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.out_circle {
		background-color: $color8;
		// border-radius: 10rpx;
		// // margin-top: -23rpx;
		// width: 130rpx;
		// height: 50rpx;
		// line-height: 50rpx;
	}
}

.select_card {
	.cart_item {
		width: 100%;
	}

	.l_radio {
		margin-top: -70rpx;
	}
}

::v-deep input {
	text-align: center !important;
}
.overlay {
	width: 100%;
	height: 100%;
	.top_btn {
		margin-top: 235rpx;
		.know_btn {
			width: 270rpx;
			height: 80rpx;
			line-height: 80rpx;
		}
	}
	.model_img {
		width: 400rpx;
		height: 190rpx;
		z-index: 99;
	}
	.tip1 {
		right: 5rpx;
		top: 460rpx;
		.model1 {
			position: absolute;
			top: 0;
			right: 25rpx;
		}
		.find_me {
			width: 310rpx;
			height: 100rpx;
			position: absolute;
			top: 163rpx;
			right: 5rpx;
		}
	}
	.tip2 {
		width: 100%;
		top: 697rpx;
		.model2 {
			position: absolute;
			top: 0;
			left: 16rpx;
		}
		.card {
			width: 100%;
			height: 135rpx;
			position: absolute;
			top: 163rpx;
			left: 0;
			right: 0;
		}
		.model3 {
			position: absolute;
			top: 260rpx;
			right: 25rpx;
			z-index: 100;
		}
	}
	.tip3 {
		width: 100%;
		right: 200rpx;
		bottom: 0;
		left: 0;
		.model4 {
			position: absolute;
			bottom: 75rpx;
			left: 50rpx;
		}
		.msg_tab {
			width: 110rpx;
			height: 87rpx;
			position: absolute;
			bottom: 6rpx;
			right: 227rpx;
		}
	}
}
</style>
